\documentclass[a4paper,11pt,oneside, titlepage]{article}
\author{Kristof Bamps, Bram Bonn\'e en Sibrand Staessens}
\title{Geavanceerde webtechnologie: Project}
\date{Vrijdag 13 juni, 2008}
\usepackage[dutch]{babel}
\usepackage{verbatim}
\usepackage{graphicx}
\usepackage[colorlinks,urlcolor=blue,filecolor=magenta]{hyperref}
\usepackage{url}
\parindent 0pt	
\hyphenation{}
\begin{document}
\maketitle \newpage
\section{Architectuur van de website}

\begin{figure}[htbp]
\centering
\includegraphics[scale=0.4]{Diagram.png}
\caption{Architectuur}
\end{figure}

Zoals in Figuur 1 te zien is de basis van heel de website de MySQL-database, daar alle inhoud hierin wordt bewaard. Om die database aan te spreken vanuit Java hebben we uiteraard gebruik moeten maken van de daarvoor bestemde connector. Nadat we de connectie hebben weten te leggen, hebben we besloten een package DB te implementeren: dit Java-pakket bevat een verzameling van allerhande manager-klassen, klassen die niets anders bevatten dan methodes die a.h.v. hun parameters de database aanspreken en er ofwel informatie uithalen en returnen, ofwel informatie insteken, ofwel reeds bestaande informatie updaten, ofwel bestaande informatie verwijderen. Zo hebben we klassen UserManager, TripManager, CommentManager, \ldots, die de desbetreffende informatie beheren. Dit leek ons de beste aanpak, omdat we op deze manier de database abstraheren tot deze POJO's. Uiteraard zijn in de implementatie SQL-injections e.d. tegengegaan.\newline\newline
 De hierboven besproken databasegerelateerde klassen worden handig gebruikt in de rest van de architectuur. Zo hebben we ook nog andere POJO's ge\"implementeerd, klassen die in feite een verzameling van gerelateerde informatie voorstellen. Zo hebben we bvb. een klasse User, die m.b.v. de manager-klassen de vrienden, familie, reizen, naam, \'e-mail, \ldots van een User kan verzamelen. Uiteraard wordt deze informatie pas opgehaald bij een geldige combinatie username/password.
Andere POJO's zijn RSSCreator, Maps, FlickrAPI, \ldots, klassen die methodes bevatten die m.b.v. gegeven parameters bepaalde stukken XHTML- of JavaScript-code teruggeven. Deze worden dan in JSP-pagina's e.d. gestoken.\newline\newline
 Een volgend niveau in de architectuur zijn de servlets. Deze staan n\'et wat hoger dan de niet-DB-gerelateerde POJO's omdat deze van die laatste gebruik kunnen maken. Servlets zijn bvb. addStop, addBlogPost, comments, \ldots, kortom: klassen die stukken XHTML- en/of JS-code teruggeven a.h.v. een gedane POST-request. Servlets worden in onze webapplicatie dan ook gebruikt i.c.m. AJAX: we sturen immers een POST-request naar \'e\'en van de voorziene servlets en de daarna ontvangen code plaatsen we m.b.v. AJAX in het XHTML-document. Uiteraard worden in de servlets a.h.v. de session gecontroleerd \'of er wel iets mag teruggestuurd worden \'en wat dat in dat geval moet zijn.\newline\newline
 Het hoogste niveau in onze architectuur zijn uiteraard de JSP-pagina's, daar deze van zowel de database-gerelateerde klassen, de POJO's als de servlets gebruik maakt. Sommige JSP-pagina's handelen POST-requests z\'elf af; in profile.jsp wordt bvb. een POST-request naar profile.jsp z\'elf gestuurd indien de gebruiker zijn gegevens heeft aangepast, of indien de gebruiker een vriend of familie verwijderd heeft, of indien de gebruiker een gemaakte trip verwijderd heeft, of \ldots. Beter was geweest moest dit ook m.b.v. AJAX gedaan worden, maar omdat we het aanvankelijk op de andere manier hadden ge\"implementeerd en het voor de eindgebruiker nog best snel en handig werkte, hebben we het zo gelaten.\newline\newline
 Een ander, los van de rest staande, architectuuronderdeel zijn de door ons aangeboden SOAP-webservices. Er is er maar \'e\'en ge\"implementeerd, nl. tripData. Deze webservice behandelt inkomende SOAP-requests en stuurt de gevraagde response terug. De service voorziet methoden zoals getLatestTrips, die een response terugstuurt met daarin de ID's van de laatst gecre\"eerde trips, getStart, die a.h.v. een meegegeven en door het wsdl-document eenduidig gespecifi\"eerd XML-element de startdatum van de desbetreffende trip teruggeeft, \ldots. Zelf gebruiken we onze SOAP-service om de RSS-feed te cre\"eren. Uiteraard is dit overhead omdat we beter gebruik hadden kunnen maken van de reeds bestaande POJO's en database-gerelateerde klassen: we hebben hier SOAP enkel maar gebruikt om aan te tonen dat onze service wel degelijk werkt.
\section{Gebruikte technologie\"en}
Zoals hierboven reeds vermeld hebben we volgende technologie\"en ge\"implementeerd:
\begin{itemize}
\item XHTML en CSS3
\item JavaScript/AJAX: bvb. dynamisch comments laten showen/hiden, nieuwe stoplocatie aan een trip toevoegen, foaf-bestand van een gebruiker tonen, \ldots, maar uiteraard ook voor controle van door de gebruiker ingegeven informatie
\item JSP: alle pagina's worden voor de eindgebruiker m.b.v. JSP geconstrueerd
\item Plain Old Java Objects
\item Servlets: alles POST-requests in AJAX worden door servlets verwerkt
\item RDF: een gebruiker kan op zijn profielpagina zijn FOAF-bestand laten genereren a.h.v. zijn ingevulde gegevens en vrienden/familie
\item API's van derden: zie de volgende sectie
\end{itemize}
\section{Gebruikte API's en libraries}
\begin{itemize}
\item jQuery: een JavaScript-library die het ons toelaat heel eenvoudig POST-requests te versturen en de daardoor verkregen code dynamisch in de website 
te laden. Ook wordt jQuery gebruikt voor de DatePicker, die gebruikt wordt bij het aanmaken of aanpassen van een trip en bij het toevoegen van een stopplaats
bij een trip. jQuery wordt ook gebruikt voor de Quick User Search, al was dat ook perfect te doen geweest met gewone JavaScript/AJAX. jQuery zorgt ook voor de
smooth show/hide-functionaliteit bij comments e.d..
\item Google Maps: om de verschillende stopplaatsen van gebruikers te visualiseren hebben we hiervan gebruik gemaakt. We hebben voor elke plaats een ballonnetje 
voorzien met daarin de link naar de stopplaats en de bijhorende trip. In tripAdmin kan men een stopplaats toevoegen door een nieuwe marker te plaatsen
op de map, dit brengt ons dan naadloos bij de volgende API:
\item GReverseGeoCoder: deze laat toe om m.b.v. gegeven co\"ordinaten de plaatsnaam te achterhalen. Deze wordt dus gebruikt wanneer een nieuwe stopplaats
aan een trip wordt toegevoegd.
\item Flickr: gebruikers kunnen foto's aan een stop toevoegen als zij owner zijn van de trip waartoe die stop behoort. Foto's worden geupload m.b.v. de flickr-account
van "Hello World" (onze website). Indien deze upload faalt, wordt de foto naar de didactiek1-server geupload en daar gehost.
\item YouTube: aanvankelijk waren we van plan uploaden voor de gebruiker mogelijk te maken, maar daar zijn we op didactiek1 niet in geslaagd. Daarom hebben we de volgende oplossing
aangeboden: gebruikers kunnen de YouTube-link ingeven en zo alsnog hun filmpje met andere gebruikers delen. Tevens kunnen filmpjes ook geupload worden, maar deze
worden dan lokaal gehost, na eerst omgezet te worden naar *.flv m.b.v. ffmpeg. 
\end{itemize}
\section{User reviews}
Volgende veranderingen zijn gedaan omwille van commentaren in de user reviews:
\begin{itemize}
\item Indien de gebruiker niet ingelogd is, dan kan die zich ook inloggen of registreren via hyperlinks in het menu links i.p.v. enkel maar via de twee hyperlinks rechts bovenaan.
\item Indien een reis wordt aangemaakt, dan kan de einddatum enkel maar na de startdatum van de reis liggen. Ook wordt er nu m.b.v. JavaScript gecontroleerd op wat de gebruiker voor de rest heeft ingegeven.
\item Indien de gebruiker nieuwe inhoud heeft geupload, wordt hem nu meegedeeld of die upload al dan niet geslaagd is. Hetzelfde geldt voor de registratie en login.
\item In Firefox 2 onder Windows bleek het menu links niet te werken. Dit hebben we dan uiteraard opgelost.
\item De Quick User Search werkte nogal buggy: klikken op iets anders deed de gebruiker bvb. naar het profiel van user ``undefined`` navigeren. Ook dit hebben we opgelost, uiteraard.
\item Een link naar ``Home`` is expliciet op de site geplaatst, daar bepaalde testgebruikers het klikken op de banner niet intu\"itief vonden.
\item Her en der hebben we onze terminologie aangepast, omdat deze nogal verwarrend kon zijn.
\end{itemize}

\section{Logboeken}
\subsection{Kristof Bamps}
\begin{itemize}
\item 20 mei: Controle registratie gebruiker
\item 23 mei: Toevoegen google maps aan index pagina, publieke markers worden
hierop getoond. Functie in DB aangepast zodat dit werkt. Uitloggen
mogelijk gemaakt.
\item 27 mei: Verder uitwerken publieke map, google maps in Internet Explorer
aan de praat gekregen, enkele kleine aanpassingen in DB.
\item 3-6 juni: Google map per reis, mogelijkheid om locatie te selecteren
bij toevoegen nieuwe stop. Hierna nog verder afwerken maps en gebruik
gemaakt van reverse geocoding. Toevoegen van functies aan DB klasse
om dit mogelijk te maken.
\item 8-10 juni: uploaden foto's naar flickr en lokaal. Enkele functies
in DB klasse aangepast/toegevoegd.
\item 11 juni: uploaden van video's
\item 11-12 juni: afwerken site.
\end{itemize}
\subsection{Bram Bonn\'e}
\begin{itemize}
\item 16 mei: Header, layout, database connection
\item 20 mei: User object, leeg array ipv null returnen, register functie,
layout voor css aangepast, divs voor dingen die geen paragraaf zijn
\item 23 mei: Werken aan XHTML validness, database connectie opschonen
\item 25 mei: Navigatie
\item 25 mei-5 juni: Veel werk aan triplocation/contentcontainer,
video's en blogposts toevoegen, trips toevoegen
\item 6 juni: Trips verwijderbaar maken (en alles ervan verwijderen),
stops verwijderbaar maken
\item 9 juni: Veel pogingen tot e-mail registratieconfirmatie, zonder
succes; blogposts aanpasbaar maken
\item 10 juni: Datumchecking bij trip toevoegen/aanpassen, aanpassingen
aan layout, veel kleine schoonheidsaanpassingen aan de site
\item 11 juni: uploaden van video's
\end{itemize}
\subsection{Sibrand Staessens}
\begin{itemize}
\item 16 mei-19 mei: database-gerelateerde klassen, zoals CommentManager, UserManager, \ldots ge\"implementeerd
\item 20 mei: aan profile.jsp begonnen + register.java gemaakt (servlet, wordt uiteindelijk niet gebruikt)
\item 23 mei: login.java gemaakt (servlet, wordt uiteindelijk niet gebruikt) + addEditTrip.js gemaakt (rijen toevoegen d.m.v. een button)
\item 25 mei-26 mei: gebruikers kunnen in profile.jsp nu ook vrienden en familie accepteren, verwijderen en op profiles van anderen requests doen
\item 27 mei: gebruikers kunnen nu hun FOAF-bestand laten genereren (gebruik gemaakt van AJAX) en kunnen op hun profiel nu ook vrienden/familie van familie/vrienden zien
\item 2 juni: begonnen aan tripAdmin.jsp (gebruik gemaakt van jQuery voor de DatePicker) + gebruikers kunnen trip ownership requests doen
\item 3 juni: Quick Search naar bestaande users m.b.v. jQuery en AJAX ge\"implementeerd; users worden bekomen d.m.v. een servlet 
\item 5 juni-6 juni: comments volledig afgewerkt, comments op een gegeven comment geven is nu ook mogelijk (gebruik gemaakt van jQuery en AJAX en een servlet)
\item 9 juni: SOAP-requests kunnen door tripData verwerkt worden + a.h.v. die SOAP wordt bij elke verandering/aanmaak/verwijdering van een trip een RSS-feed herwerkt
\item 11 juni-12 juni: lay-out geperfectioneerd, kleine details juist gezet + omwille van user reviews enkele kleine veranderingen gedaan + gewerkt aan verslag en presentatie
\end{itemize}
\end{document}
